<template>
<div>
  <el-form ref="projectFilter" :model="project" :size="defaultFormItemSize" label-width="80px" label-position="right" @submit.native.prevent class="px20 bgWhite">
    <filter-box :item-width="350">
      <el-form-item label="项目名称" prop="formFilter.projectName">
        <el-input class="filter-item" v-model="project.formFilter.projectName" :clearable="true" placeholder="项目名称" />
      </el-form-item>
      <el-form-item label="项目类别" prop="formFilter.projectType">
        <el-select v-model="project.formFilter.projectType" :clearable="true" placeholder="发布状态" class="filter-item">
          <el-option v-for="item in typeList" :key="item.id" :value="item.id" :label="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button slot="operator" type="default" :size="defaultFormItemSize" @click="onResetProject">重置</el-button>
      <el-button slot="operator" type="primary" :size="defaultFormItemSize" @click="refreshProject(true)">查询</el-button>
      <el-button slot="operator" type="primary" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('activies:activies:add')" @click="onAdd()">
        新建
      </el-button>
    </filter-box>
  </el-form>
  <el-card class="box-card mt12" shadow="never">
    <div slot="header" class="clearfix">
      <span>共查询到{{project.Project.impl.totalCount}}条数据</span>
      <!-- <el-select v-model="sort" placeholder="请选择排序条件" style="float: right;top:-5px" :size="defaultFormItemSize">
        <el-option v-for="item in sortOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select> -->
    </div>
    <el-row>
      <el-col :span="24">
        <el-table border ref="ground" :data="project.Project.impl.dataList" :size="defaultFormItemSize" @sort-change="project.Project.impl.onSortChange" header-cell-class-name="table-header-gray" highlight-current-row
          @current-change="project.Project.impl.currentRowChange">
          <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="project.Project.impl.getTableIndex" />
          <el-table-column label="项目名称" prop="projectName"></el-table-column>
          <el-table-column label="项目类别" prop="projectTypeStr"></el-table-column>
          <el-table-column label="服务对象" prop="serverTargetStr"></el-table-column>
          <el-table-column label="相关活动数" prop="activityCount"></el-table-column>
          <el-table-column label="操作" fixed="right" width="220">
            <template slot-scope="scope">
              <el-button @click.stop="onEdit(scope.row)" type="text" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('ground:ground:groundEdit')">
                编辑
              </el-button>
              <el-button @click.stop="onShow(scope.row)" type="text" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('ground:ground:groundEdit')">
                查看
              </el-button>
              <!-- <el-button @click.stop="onActiviClick(scope.row)" type="text" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('ground:ground:groundEdit')">
                相关活动
              </el-button> -->
              <el-button @click.stop="onDeleteClick(scope.row)" type="text" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('ground:ground:groundEdit')">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" style="margin-top: 10px;">
          <el-pagination :total="project.Project.impl.totalCount" :current-page="project.Project.impl.currentPage" :page-size="project.Project.impl.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next, sizes"
            @current-change="project.Project.impl.onCurrentPageChange" @size-change="project.Project.impl.onPageSizeChange">
          </el-pagination>
        </el-row>
      </el-col>
    </el-row>
  </el-card>

</div>
</template>
<script>
import {
  TableWidget
} from '@/utils/widget.js';
import {
  ProjectController,
  DictionaryController
} from '@/api';
import qs from "qs"
export default {
  name: "",
  props: {
    status: {
      type: String,
      default: '0'
    },
    statusList: {
      type: Array,
      default: () => []
    },
    typeList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      project: {
        formFilter: {},
        Project: {
          impl: new TableWidget(this.loadData, true, true, true, 'createTime', 0)
        },
        isInit: false
      },
      total: 0,
      tableList: [],
      sortOptions: [],
      sort: "",
    }
  },
  methods: {
    init() {
      let params = {};

    },
    onResetProject() {
      this.$refs.projectFilter.resetFields();
      this.refreshProject(true);
    },
    refreshProject(reloadData = false) {
      if (reloadData) {
        this.project.Project.impl.refreshTable(true, 1);
      } else {
        this.project.Project.impl.refreshTable();
      }
      if (!this.project.isInit) {
        // 初始化下拉数据
      }
      this.project.isInit = true;
    },
    loadData(params) {
      if (params == null) params = {};
      params = {
        ...params
      }
      params.condition = this.project.formFilter;
      return new Promise((resolve, reject) => {
        ProjectController.list(this, params).then(res => {
          resolve({
            dataList: res.data.dataList,
            totalCount: Number(res.data.totalCount)
          });
        }).catch(e => {
          reject(e);
        });
      });
    },
    onAdd() {
      this.$emit("onAdd")
    },
    onEdit(row) {
      let me = this;
      ProjectController.info(me, qs.stringify({
        id: row.id
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
        },
      }).then(res => {
        me.$emit("onEdit", res.data)
      })
    },
    onShow(row) {
      let me = this;
      ProjectController.info(me, qs.stringify({
        id: row.id
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
        },
      }).then(res => {
        me.$emit("onShow", res.data)
      })
    },
    onActiviClick(row) {

    },
    onDeleteClick(row) {
      let params = {};
      params.id = row.id;
      this.$confirm('是否删除此项目？').then(res => {
        ProjectController.delete(this, qs.stringify({
          id: row.id
        }), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
          }
        }).then(res => {
          this.$message.success('删除成功');
          this.project.Project.impl.refreshTable();
        }).catch(e => {});
      }).catch(e => {});
    },
  },
  mounted() {
    this.init();
    this.refreshProject();
  }
}
</script>
<style lang="scss" scoped>
.imgLimit {
    height: 120px;
    border: 1px solid #ccc;
    width: 98%;
    margin: auto auto 20px;
}
.first {
    display: flex;
    justify-content: space-between;
    .ProjectTitle {
        font-size: 16px;
        color: #409EFF;
    }
}
.right {
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeaea;
}
.remark {
    .font {
        color: #999999;
    }

}
.statusBtn {
    margin-right: 10px;
}
</style>
